import React, { useRef, useEffect, useState, FC } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'
import LoadingComponent from '@/components/loading'
import SearchTool from './components/tools/search'
import '@amap/amap-jsapi-types'
import './index.less'
import { camelCase } from 'lodash'

const App: FC = () => {
  const container = useRef<HTMLDivElement>(null)
  const [map, setMap] = useState<AMap.Map | null>(null)
  const [mapVisible, setMapVisible] = useState(false)
  const [driving, setDriving] = useState<any>()
  const [geolocation, setGeolocation] = useState<any>()
  const placeSearch = useRef(null)
  const center = useRef<any>(null)
  const [AMap, setAMap] = useState<any>()
  const interval = useRef<any>()

  useEffect(() => {
    if (!container.current) {
      return
    }
    AMapLoader.load({
      key: MAP_KEY ?? '',
      version: '2.0',
      plugins: [
        'AMap.ToolBar',
        'AMap.Driving',
        'AMap.Geolocation',
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Pixel',
      ],
    }).then((AMap) => {
      setAMap(AMap)
      const map: AMap.Map = new AMap.Map(container.current, {
        zoom: 13,
      })
      setMap(map)
      map.on('complete', () => {
        setMapVisible(true)
      })
      map.addControl(
        new AMap.ToolBar({
          buttonPosition: 'RT',
        }),
      )
      const geolocation = new AMap.Geolocation({
        showButton: true, // 是否显示定位按钮
        buttonPosition: 'LB', // 定位按钮的位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
        showMarker: true, // 是否显示定位点
        markerOptions: {
          // 自定义定位点样式，同Marker的Options
          offset: new AMap.Pixel(-18, -36),
          content:
            '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
        },
        showCircle: true, // 是否显示定位精度圈
        circleOptions: {
          strokeColor: '#0093FF',
          noSelect: true,
          strokeOpacity: 0.5,
          strokeWeight: 1,
          fillColor: '#02B0FF',
          fillOpacity: 0.25,
        },
        zoomToAccuracy: false,
      })
      map.addControl(geolocation)
      geolocation.getCurrentPosition((status: any, result: any) => {
        center.current = result.position
      })
      setGeolocation(geolocation)
      const driving = new AMap.Driving({
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map,
      })
      setDriving(driving)
      placeSearch.current = new AMap.PlaceSearch()
    })
  }, [container])

  const sendPosition = () => {
    interval.current && clearInterval(interval.current)
    interval.current = setInterval(() => {
      geolocation.getCurrentPosition((status: any, result: any) => {
        console.log(status, result, '11111111')
      })
    }, 15 * 1000)
  }

  const searchToolCallback = (item: any) => {
    const startLngLat = [center.current?.lng, center.current?.lat]
    const endLngLat = [item.location.lng, item.location.lat]
    console.log(driving, driving.clear)
    driving.clear()
    console.log(AMap, 'Amap')
    const newDriving = new AMap.Driving({
      policy: AMap.DrivingPolicy.LEAST_TIME,
      map,
    })
    setDriving(newDriving)
    newDriving?.search(startLngLat, endLngLat, () => {
      sendPosition()
    })
  }

  return (
    <div className="wrap">
      {!mapVisible && <LoadingComponent />}
      <div
        style={{ visibility: mapVisible ? 'visible' : 'hidden' }}
        id="container"
        ref={container}
      ></div>
      <div
        style={{ visibility: mapVisible ? 'visible' : 'hidden' }}
        className="tool"
      >
        <div className="search">
          <SearchTool
            placeSearch={placeSearch.current}
            callback={searchToolCallback}
          />
        </div>
      </div>
    </div>
  )
}

export default App
